<template>
  <portal-user-layout ref="query" :trigger="'hover'" :layout="layout" placement="left" @callBack="userCallBack">
    <div slot="reference" :class="userShow === true ?'active': ''" @mouseenter="openUser" @mouseleave="closeUser">
      <i class="el-icon-menu" />
    </div>
  </portal-user-layout>
</template>
<script>
import PortalUserLayout from './common/layout';
export default {
  name: 'LayoutList',
  components: { PortalUserLayout },
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      userShow: false
    };
  },
  methods: {
    openUser() {
      this.userShow = true;
      this.$refs.query.triggerOnClick();
    },
    closeUser() {
      this.userShow = false;
      this.$refs.query.triggerOnClick();
    },
    userCallBack(data) {
      this.userShow = data;
    }
  }
};
</script>

<style scoped>

</style>
